<template>
  <div class="scheme-table">
    <div class="table-search">
      <div class="search-left">
        <div class="search-item">
          <el-input
            placeholder="请输入内容"
            v-model="searchForm.title"
            size="small"
            clearable
            @keyup.enter.native="searchData">
            <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
          </el-input>
        </div>
      </div>
      <div class="search-right guide-step" id="guide-step-6">
        <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addScheme">新建考核模板</el-button>
      </div>
    </div>
    <div class="table-box">
      <vxe-table
        stripe
        border
        align="center"
        auto-resize
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        row-id="id"
        height="100%"
        class="table-con">
        <vxe-column type="seq" title="序号"></vxe-column>
        <vxe-column field="templateName" title="考核模板" :min-width="240"></vxe-column>
        <!-- <vxe-column field="year" title="模板分类" :min-width="120"></vxe-column> -->
        <vxe-column field="modelName" title="指标模型" :min-width="120"></vxe-column>
        <vxe-column field="createName" title="创建人" :min-width="150"></vxe-column>
        <vxe-column field="createTime" title="创建时间" :width="180">
          <template #default="{ row }">
            {{ row.createTime | filterDate }}
          </template>
        </vxe-column>
        <vxe-column field="oper" title="操作" :width="180" fixed="right">
          <template #default="{ row }">
            <template v-if="row.used">
              <el-button type="text" style="color: #2b78f1" @click.stop="viewScheme(row)">查看</el-button>
              <el-button type="text" style="color: #2b78f1" @click.stop="toCopy(row, 'copy')">复制</el-button>
            </template>
            <template v-if="!row.used">
              <el-button type="text" style="color: #2b78f1" @click.stop="editScheme(row)">编辑</el-button>
              <el-button type="text" style="color: #ff6d56" @click.stop="delScheme(row)">删除</el-button>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="table-pagination">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@utility/utility'

export default {
  name: 'SchemeTable',
  emits: ['add-scheme', 'search-list', 'edit-scheme', 'copy-scheme', 'del-scheme', 'launch-scheme'],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchForm: {
        title: '',
      },
    }
  },
  filters: {
    filterDate(val) {
      if (val) {
        return formatDate(new Date(val).toLocaleString(), 'yyyy-MM-dd hh:mm:ss')
      }
      return '-'
    },
  },
  methods: {
    addScheme() {
      this.$emit('add-scheme')
    },
    searchData() {
      this.$emit('search-list', this.searchForm)
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    // 跳转到考核详情页面
    toCheckDetail(obj) {
      console.log(obj)
    },
    editScheme(obj) {
      this.$emit('edit-scheme', obj)
    },
    delScheme(obj) {
      this.$confirm('确定要删除当前考核模板吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('del-scheme', obj)
        })
        .catch(() => {})
    },
    launchScheme(obj) {
      this.$confirm('确定使用当前考核方案发起考核吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('launch-scheme', obj)
        })
        .catch(() => {})
    },
    viewScheme(obj) {
      this.$emit('view-scheme', obj)
    },
    toCopy(obj) {
      this.$emit('copy-scheme', obj)
    },
  },
}
</script>
<style lang="scss" scoped>
.scheme-table {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .table-search {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .search-left {
      width: 100%;
      display: flex;
      align-items: center;
      .search-item + .search-item {
        margin-left: 20px;
      }
    }
  }
  .table-box {
    width: 100%;
    flex: 1;
    position: relative;
  }
  .table-pagination {
    margin-top: 10px;
  }
  ::v-deep .headerStyle {
    background-color: #f0f4f9;
    .vxe-cell {
      color: #333333;
      font-size: 14px;
      span {
        font-weight: 600;
      }
    }
  }
  ::v-deep .rowClass {
    .vxe-cell {
      color: #666666;
      font-size: 14px;
      p,
      div,
      span {
        font-size: 14px;
      }
      .scheme-name.go-namage-name {
        cursor: pointer;
        color: #2b78f1;
      }
    }
  }
}
</style>
